import React, { useEffect, useState } from 'react'
//如果想要接收路由中传递参数，需要依靠路由中的钩子函数
import { useParams, useSearchParams, useLocation } from 'react-router-dom'
import axios from 'axios'
//路由地址占位符的写法：/路由名称/参数值  =>  useParams()
//路由地址请求字符串(查询字符串)写法： /路由名称?参数名=参数值  => useSearchParams()
//路由地址按照state属性来传递值写法: /路由名称  => useLocation()
export default function BookDetail() {
    //调用钩子
    let { state: { id } } = useLocation();

    console.log(id)
    //定义一个状态数据
    let [oneBook, setOneBook] = useState({});

    //调用
    useEffect(() => {
        //ajax请求
        async function getOneBook() {
            let { data } = await axios.get(`/api/books/${id}`);
            //更新状态数据
            setOneBook(data);
        }
        //调用函数
        getOneBook();
    }, [])

    return (
        <div className='bookone'>
            <h1>{oneBook.name}</h1>
            <p className='autor'>作者:{oneBook.autor}</p>
            <p className='infro'>介绍：{oneBook.infro}</p>
            <img src={'/image/' + oneBook.img} alt="" />
        </div>
    )
}
